<!DOCTYPE HTML>
<html>
  <head>
    <title>Web-based Memory</title>
    <script type="text/javascript">
      var oField;
      var oScore;
      var aKaartenParen = new Array();
      
      function Score(iGoal) {
        var self = this;
        var iBeginTijd;
        
        var iScore = 0;
        
        this.increase = function() {
          iScore++;
          if (iScore == iGoal) {
            var iSpeelTijd = Math.floor((new Date().getTime() - iBeginTijd)/1000);
            var iSpeelMin = Math.floor(iSpeelTijd / 60);
            var iSpeelSec = Math.floor(iSpeelTijd % 60);
            alert('Gefeliciteerd, jouw tijd was: ' + iSpeelMin + ':' + iSpeelSec);
          }
        }
        
        this.start = function() {
          iBeginTijd = new Date().getTime();
        }
      }
      
      function Field(sTableId) {
        var self = this;
        
        var bCanClick = false;
        var bOneClicked = false;
        var tKijkTijd;
        var oPrevKaartenPaar;

        var aFields = [].slice.call(document.getElementById(sTableId).getElementsByTagName('td'), 0);
        
        this.getFields = function() {
          return aFields.length;
        }

        this.getRandomField = function() {
          var iRnd = Math.floor(Math.random() * aFields.length);
          var eField = aFields[iRnd];
          aFields = aFields.slice(0, iRnd).concat(aFields.slice(iRnd+1, aFields.length));
          return eField;
        }
        
        this.canClick = function() {
          return bCanClick;
        }
        
        this.enableClick = function() {
          bCanClick = true;
          bOneClicked = false;
        }
        
        this.click = function(oKaartenPaar) {
          if (bOneClicked) {
            bCanClick = false;
            tKijkTijd = setTimeout(function () {
              oKaartenPaar.hide();
              oPrevKaartenPaar.hide();
            }, 2000);
          } else {
            bOneClicked = true;
            oPrevKaartenPaar = oKaartenPaar;
          }
        }
        
        this.stopKijkTijd = function() {
          clearTimeout(tKijkTijd);
          bCanClick = true;
          bOneClicked = false;
        }
      }
      
      function KaartenPaar(sLetter, aVelden) {
        var self = this;
        
        var iClicked = 0;
        
        var rIndex = aKaartenParen.length;
        aKaartenParen[rIndex] = self;
        
        
        for (var i = 0; i < aVelden.length; i++) {
          aVelden[i].innerHTML = '*';
          aVelden[i].setAttribute("rindex", rIndex);
          aVelden[i].onclick = function() {
            aKaartenParen[this.getAttribute("rindex")].click(this);
          }
        }
        
        this.click = function(eVeld) {
          if (!oField.canClick() || iClicked == 2)
            return;
          
          eVeld.innerHTML = sLetter;
          iClicked++;
          oField.click(self);
          if (iClicked == 2) {
            oScore.increase();
            oField.stopKijkTijd();
          }
        }
        
        this.hide = function() {
          iClicked = 0;
          aVelden[0].innerHTML='*';
          aVelden[1].innerHTML='*';
          oField.enableClick();
        }
      }

      window.onload = function() {
        oField = new Field('kaarten');
        var aLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        var iLetter = Math.min(aLetters.length, oField.getFields()/2);
        oScore = new Score(iLetter);
        while (iLetter--) {
          new KaartenPaar(aLetters[iLetter], [oField.getRandomField(), oField.getRandomField()]);
        }
        oField.enableClick();
        oScore.start();
      }
    </script>
    <style type="text/css">
      #kaarten {
        cursor:pointer;
      }
    </style>
  </head>

  <body>
    <h1 id="kop">Memory</h1>
    <table id="kaarten">
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </table>
  </body>
</html>